<template>
  <div style="padding:30px;text-align:left;">
    <el-card class="box-card">
      <el-steps style="margin:40px 150px;" :active="active">
        <el-step title="待付款" :description="orderBase.createTime" />
        <el-step title="待发货" :description="orderBase.paymentTime" />
        <el-step title="已发货" :description="orderBase.deliveryTime" />
        <el-step v-if="orderBase.status!==4&&orderBase.status!==5" title="已完成" :description="orderBase.receiveTime" />
        <el-step v-if="orderBase.status!==3&&orderBase.status!==5" title="退货" :description="orderBase.finishTime" />
      </el-steps>
      <el-divider />
      <el-row :gutter="20">
        <el-col :span="2" :offset="0" style="font-weight:700;">订单信息:</el-col>
        <el-col :span="2" :offset="0">
          <el-button v-if="orderBase.status!=undefined" style="margin-top:-4px;margin-left:-30px;" :type="status[orderBase.status].type" :plain="status[orderBase.status].plain" size="mini">{{ status[orderBase.status].desc }}</el-button>
        </el-col>
      </el-row>
      <el-row style="margin-top:30px; margin-bottom:20px;" :gutter="20">
        <el-col :span="6" :offset="0">
          订单金额:<span style="color:red;">{{ orderBase.totalAmount }}</span>
        </el-col>
        <el-col :span="6" :offset="0">
          订单编号:{{ orderBase.orderSn }}
        </el-col>
        <el-col :span="6" :offset="0">
          用户账号:{{ orderBase.memberUsername }}
        </el-col>
        <el-col :span="6" :offset="0">
          备注:{{ orderBase.totalAmount }}
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6" :offset="0">
          下单时间:{{ orderBase.createTime }}
        </el-col>
        <el-col :span="6" :offset="0">
          付款时间:{{ orderBase.paymentTime }}
        </el-col>
        <el-col :span="6" :offset="0">
          发货时间:{{ orderBase.deliveryTime }}
        </el-col>
        <el-col :span="6" :offset="0">
          收货时间:{{ orderBase.finishTime }}
        </el-col>
      </el-row>
      <el-divider />
      <el-row :gutter="20">
        <el-col style="font-weight:700;" :span="2" :offset="0">收货人信息:</el-col>
      </el-row>
      <el-row style="margin-top:20px; margin-bottom:20px;" :gutter="20">
        <el-col :span="6" :offset="0">
          收货人信息:{{ orderBase.receiverName }}
        </el-col>
        <el-col :span="6" :offset="0">
          用户姓名:{{ orderBase.memberUsername }}
        </el-col>
        <el-col :span="6" :offset="0">
          手机号码:{{ orderBase.receiverPhone }}
        </el-col>
        <el-col :span="6" :offset="0">
          邮政编码:{{ orderBase.receiverPostCode }}
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6" :offset="0">
          地市:{{ orderBase.receiverProvince+orderBase.receiverCity }}
        </el-col>
        <el-col :span="6" :offset="0">
          详细地址:{{ orderBase.receiverDetailAddress }}
        </el-col>
      </el-row>
      <el-divider />
      <el-row :gutter="20">
        <el-col style="font-weight:700;margin-bottom:15px;" :span="2" :offset="0">商品信息:</el-col>
      </el-row>
      <el-table :data="orderItems" border stripe>
        <el-table-column
          prop="productName"
          label="商品名称"
          width="200"
          align="center"
        />
        <el-table-column
          label="商品图片"
          width="200"
          align="center"
        >
          <template slot-scope="scope">
            <img style="display:inline-block;width:100px;height:100px;" :src="scope.row.productSkuPic?scope.row.productSkuPic:scope.row.productPic" alt="">
          </template>
        </el-table-column>
        <el-table-column
          label="是否退货"
          width="200"
          align="center"
        >
          <template slot-scope="scope">
            <span :style="{color:scope.row.isReturn?'red':''}">{{ scope.row.isReturn?'是':'否' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="productBrand"
          label="品牌"
          width="200"
          align="center"
        />
        <el-table-column
          prop="productPrice"
          label="价格"
          width="120"
          align="center"
        />
        <el-table-column
          prop="productQuantity"
          label="商品数量"
          width="200"
          align="center"
        />
        <el-table-column
          fixed="right"
          prop="totalPrice"
          label="小计"
          width="250"
          align="center"
        />
      </el-table>
      <el-divider />

      <div>
        <el-row :gutter="20">
          <el-col style="font-weight:700;margin-bottom:15px;" :span="2" :offset="0">费用信息:</el-col>
        </el-row>
        <el-row style="margin-top:20px;" :gutter="20">
          <el-col :span="6" :offset="0">
            运费金额:<span style="color:red;">0</span>
          </el-col>
          <el-col :span="6" :offset="0">
            订单总金额:<span style="color:red;">{{ orderBase.totalAmount }}</span>
          </el-col>
          <el-col :span="6" :offset="0">
            实际金额:<span style="color:red;">{{ orderBase.payAmount?orderBase.payAmount:0 }}</span>
          </el-col>
          <el-col :span="6" :offset="0">
            促销优化金额:<span style="color:red;">{{ orderBase.promotionAmount?orderBase.promotionAmount:0 }}</span>
          </el-col>
        </el-row>

        <el-form ref="form" style="margin-left:-10px;" :model="form" :rules="rules" label-width="80px" size="mini">
          <div v-if="orderBase.status===1">
            <el-row style="margin-top:20px;" :gutter="20">
              <el-col :span="6" :offset="0">
                <el-form-item label="物流公司" size="mini" prop="deliveryCompany">
                  <el-select v-model="form.deliveryCompany" placeholder="物流公司" clearable>
                    <el-option
                      label="顺丰快递"
                      value="顺丰快递"
                    />
                    <el-option
                      label="韵达快递"
                      value="韵达快递"
                    />
                    <el-option
                      label="中国邮政"
                      value="中国邮政"
                    />
                    <el-option
                      label="中通快递"
                      value="中通快递"
                    />
                    <el-option
                      label="申通快递"
                      value="申通快递"
                    />
                  </el-select>

                </el-form-item>
              </el-col>
              <el-col :span="6" :offset="0">
                <el-form-item label="物流单号" size="mini" prop="deliverySn">
                  <el-input v-model="form.deliverySn" placeholder="物流单号" size="mini" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row style="margin-top:60px;" type="flex" justify="center" :gutter="20">
              <el-col :span="3" :offset="0">
                <el-button style="width:100%;" type="primary" size="small" @click="submitReply">确认发货</el-button>
              </el-col>
            </el-row>

          </div>
        </el-form>
        <div v-if="orderBase.status!==0||orderBase.status!==1">
          <el-divider class="margin-top-30" />
          <el-row :gutter="20">
            <el-col style="font-weight:700;margin-bottom:15px;" :span="2" :offset="0">物流信息:</el-col>
            <el-col style="transform:translateX(-20px);color:gray;font-weight:700;" :span="6" :offset="0">
              {{ orderBase.deliveryCompany }}【{{ orderBase.deliverySn }}】
            </el-col>
          </el-row>
          <el-table :data="deliveryData" border stripe>
            <el-table-column
              prop="time"
              label="时间"
              width="200"
            />
            <el-table-column
              prop="status"
              label="状态"
              width="500"
            />
            <el-table-column
              prop="note"
              label="备注"
            />
          </el-table>

        </div>

      </div>
      <div style="margin-top:100px;" />
    </el-card>

  </div>
</template>

<script>
import {
  orderDetail as orderDetailApi,
  sendDone as sendDoneApi
} from '@/api/order/list'
import mix from '@/mixin'
export default {
  name: 'OrderDetail',
  mixins: [mix],
  data() {
    return {
      orderSn: '',
      orderBase: {},
      orderItems: [],
      active: 1,
      form: {
        deliverySn: '', // 物流单号
        deliveryCompany: ''// 物流公司
      },
      rules: {
        deliverySn: [{ required: true, trigger: 'blur', message: '请填写物流编号' }],
        deliveryCompany: [{ required: true, trigger: 'blur', message: '请选择物流公司' }]
      },
      deliveryData: [
        {
          id: '1',
          time: '2015-03-06 21:16:58',
          status: '深圳市横岗速递营销部已收件',
          note: '揽投员姓名：钟定基;联系电话：13883838888'
        },
        {
          id: '2',
          time: '2015-03-07 14:25:00',
          status: '离开深圳市 发往广州市',
          note: ''
        },
        {
          id: '3',
          time: '2015-03-08 00:17:00',
          status: '到达广东速递物流公司广航中心处理中心（经转）',
          note: ''
        },
        {
          id: '4',
          time: '2015-03-08 01:15:00',
          status: '离开广州市 发往北京市（经转）',
          note: ''
        },
        {
          id: '5',
          time: '2015-03-09 09:01:00',
          status: '到达北京黄村转运站处理中心（经转）',
          note: ''
        },
        {
          id: '6',
          time: '2015-03-09 18:39:00',
          status: '离开北京市 发往呼和浩特市（经转）',
          note: ''
        },
        {
          id: '7',
          time: '2015-03-10 18:06:00',
          status: '到达 呼和浩特市 处理中心',
          note: ''
        },
        {
          id: '8',
          time: '2015-03-11 09:53:48',
          status: '呼和浩特市邮政速递物流分公司金川揽投部安排投递',
          note: '投递员姓名：安长虹;联系电话：18047140142'
        }
      ]
    }
  },
  created() {
    // this.orderSn = this.$route.query.orderSn
    this.orderSn = this.$route.params.orderSn
    this.getOrderDetail()
  },
  methods: {
    // 校验表单信息
    verifyForm(arr) {
      var errorArr = []
      this.$refs.form.validateField(arr, error => {
        errorArr.push(error)
      })
      for (var i = 0; i < errorArr.length; i++) {
        console.log('err==>', errorArr[i])
        if (errorArr[i]) {
          this.$message.error(errorArr[i])
          return false
        }
      }
      return true
    },
    // 处理发货信息
    submitReply() {
      var status = this.orderBase.status
      var flag = true
      this.form.orderId = this.orderSn
      var api = null
      var arr = []
      if (status === 1) { // 待发货
        api = sendDoneApi
        arr = ['deliveryCompany', 'deliverySn']
        flag = this.verifyForm(arr)
      }
      // 校验成功
      if (flag) {
        api(this.form)
          .then(res => {
            const { message, success } = res
            if (success) {
              this.$message.success('处理成功!')
              this.getOrderDetail()
            } else {
              this.$message.error(message)
            }
          })
      }
    },
    // 获取订单详情
    getOrderDetail() {
      orderDetailApi(this.orderSn)
        .then(res => {
        //   console.log('订单详情==>', res)
          const { success, message, data } = res
          if (success) {
            this.orderBase = data.orderDetail.orderBase
            this.orderItems = data.orderDetail.orderItems
            this.active = this.orderBase.status + 1
          } else {
            this.$message.error(message)
          }
        })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-form-item__error{
  left:-70px;
}
</style>
